<template>
  <div class="page-content">
    <div class="header" style="margin-bottom: 1.5rem">
      <h3>会员权益详情页</h3>
    </div>
    <table-bar :showTop="true" @search="search" @reset="resetForm(searchFormRef)" @changeColumn="changeColumn"
      :columns="columns">
      <template #top>
        <el-form :model="searchForm" ref="searchFormRef" label-width="82px" style="padding-bottom: 1.5rem">
          <el-row :gutter="20">
            <form-input label="用户信息" prop="name" v-model="searchForm.name" />
            <form-input label="手机号" prop="phone" v-model="searchForm.phone" />
            <form-input label="开通渠道" prop="userleavel" v-model="searchForm.userleavel" />
          </el-row>
          <el-row :gutter="20">
            <!-- 创建日期筛选 -->
            <div class="databox">
              <label class="el-form-item__label" style="margin-left: 1.5rem">开通时间：</label>
              <el-date-picker label="开通时间：" v-model="datavalue1" type="datetimerange" start-placeholder="开始日期"
                end-placeholder="结束日期" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
                time-format="A hh:mm:ss" />
            </div>
            <!-- end创建日期筛选 -->
            <!-- 最近活跃时间：筛选 -->
            <div class="databox">
              <label class="el-form-item__label" style="margin-left: 1.5rem">到期时间：</label>
              <el-date-picker label="结束时间：" v-model="datavalue2" type="datetimerange" start-placeholder="开始日期"
                end-placeholder="结束日期" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
                time-format="A hh:mm:ss" />
            </div>
            <!-- end最近活跃时间：筛选 -->
          </el-row>
        </el-form>
      </template>
    </table-bar>

    <art-table :data="tableData" selection :currentPage="1" :pageSize="10" :total="50">
      <template #default>
        <el-table-column label="用户信息" prop="avatar" #default="scope" width="300px" v-if="columns[0].show"
          style="cursor: pointer">
          <div class="user" style="display: flex; align-items: center; cursor: pointer" @click="linkuserdetails()">
            <img class="avatar" :src="scope.row.avatar" />
            <div>
              <el-dropdown placement="top-end">
                <el-link underline="never">{{ scope.row.username }}</el-link>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>
                      <p>{{ scope.row.username }} ID:{{ scope.row.id }}</p>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <p class="email">ID:{{ scope.row.id }}</p>
            </div>
          </div>
        </el-table-column>
        <el-table-column label="手机号" prop="mobile" v-if="columns[1].show" />
        <el-table-column label="会员权益" prop="userviptype" />
        <el-table-column label="开通渠道" prop="dep" v-if="columns[3].show" />
        <!-- 标签选项 -->
        <el-table-column label="开通时间" prop="create_time" sortable v-if="columns[5].show" />
        <el-table-column label="到期时间" prop="end_time" sortable v-if="columns[5].show" />
        <el-table-column fixed="right" label="操作" width="150px">
          <template #default="scope">
            <button-table type="edit" @click="linkuserdetails()" />
            <button-table type="delete" @click="deleteUser" />
          </template>
        </el-table-column>
      </template>
    </art-table>

    <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '添加用户' : '编辑用户'" width="30%"
      :close-on-click-modal="false">
      <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
        <el-form-item label="用户信息" prop="username">
          <el-input v-model="formData.username" />
        </el-form-item>
        <el-form-item label="用户id" prop="phone">
          <el-input v-model="formData.phone" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="formData.sex">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="来源" prop="dep">
          <el-select v-model="formData.dep">
            <el-option label="微信小程序" :value="1" />
            <el-option label="IOS" :value="2" />
            <el-option label="安卓" :value="3" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ACCOUNT_TABLE_DATA } from '@/mock/temp/user_quanyi_list'
import { FormInstance } from 'element-plus'
import { ElMessageBox, ElMessage } from 'element-plus'
import type { FormRules } from 'element-plus'
import { useRouter } from 'vue-router'

const dialogType = ref('add')
const dialogVisible = ref(false)
const datavalue1 = ref('') //创建时间：
const datavalue2 = ref('') //最近活跃时间：
const router = useRouter() // 使用useRouter获取路由实例

const formData = reactive({
  username: '',
  phone: '',
  sex: '',
  dep: '',
  userleavel: ''
})

const sexOptions = [
  {
    value: '男',
    label: '男'
  },
  {
    value: '女',
    label: '女'
  }
]
const levelOptions = [
  {
    value: '1',
    label: '会员用户'
  },
  {
    value: '2',
    label: ' 普通用户'
  }
]

const columns = reactive([
  { name: '用户信息', show: true },
  { name: '手机号', show: true },
  { name: '性别', show: true },
  { name: '来源', show: true },
  { name: '状态', show: true },
  { name: '创建日期', show: true }
])

const searchFormRef = ref<FormInstance>()
const searchForm = reactive({
  name: '',
  phone: '',
  id: '',
  account: '',
  sex: '',
  userleavel: ''
})

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const tableData = ACCOUNT_TABLE_DATA
//编辑用户
// const showDialog = (type: string, row?: any) => {
//   dialogVisible.value = true
//   dialogType.value = type

//   if (type === 'edit' && row) {
//     formData.username = row.username
//     formData.phone = row.mobile
//     formData.sex = row.sex === 1 ? '男' : '女'
//     formData.dep = row.dep
//   } else {
//     formData.username = ''
//     formData.phone = ''
//     formData.sex = '男'
//     formData.dep = ''
//   }
// }
const linkuserdetails = function () {
  setTimeout(() => {
    router.push('/user_student/UserDetails')
  }, 300)
}

const deleteUser = () => {
  ElMessageBox.confirm('确定要注销该用户吗？', '注销用户', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error'
  }).then(() => {
    ElMessage.success('注销成功')
  })
}

const search = () => { }

const changeColumn = (list: any) => {
  columns.values = list
}

const filterTag = (value: string, row: any) => {
  return row.status === value
}

const getTagType = (status: string) => {
  switch (status) {
    case '1':
      return 'success'
    default:
      return 'info'
  }
}

const buildTagText = (status: string) => {
  let text = ''
  if (status === '1') {
    text = '是'
  } else {
    text = '否'
  }
  return text
}

const rules = reactive<FormRules>({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
  ],
  sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
  dep: [{ required: true, message: '请选择来源', trigger: 'change' }]
})

const formRef = ref<FormInstance>()

const handleSubmit = async () => {
  if (!formRef.value) return

  await formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success(dialogType.value === 'add' ? '添加成功' : '更新成功')
      dialogVisible.value = false
    }
  })
}
</script>

<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;

  .user {
    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 6px;
    }

    >div {
      margin-left: 10px;

      .user-name {
        font-weight: 500;
        color: var(--art-text-gray-800);
      }
    }
  }
}

.table-bar {
  padding: 0;
}
</style>
